<template>
  <div class="p-6">
    <!-- 标题 -->
    <div class="text-2xl font-bold mb-6 border-b pb-2 text-gray-700">
      {{ configData.config_name || '配置详情' }}
    </div>

    <!-- 卡片容器 -->
    <el-form :model="configData" label-width="140px" class="space-y-4">
      <dynamic-form-item
        v-for="(item, index) in configData.data"
        :key="index"
        :type="item.type"
        v-model="item.value"
        :option="item.options"
        :label="item.name"
        class="w-200"
      />
      <!-- 操作按钮 -->
      <el-form-item>
        <el-button type="primary" @click="submitForm">配置</el-button>
      </el-form-item>
    </el-form>
  </div>
</template>

<script setup lang="ts">
import dynamicFormItem from '@/components/dynamicFormItem/index.vue'
import { useRoute } from 'vue-router'
import { getConfigApi, updateConfigDataApi } from '@/api/config'
import { onMounted, ref } from 'vue'
import { ElMessage } from 'element-plus'

const route = useRoute()
const query: any = route.meta.query

const configData = ref<any>({})

const getConfigDataDetail = async () => {
  try {
    const res = await getConfigApi(query.config_id)
    configData.value = res.data
  } catch (error) {
    ElMessage.error('获取配置数据失败')
  }
}

const submitForm = async () => {
  try {
    await updateConfigDataApi(configData.value)
    ElMessage.success('配置成功')
  } catch (error) {
    ElMessage.error('配置失败')
  }
}

onMounted(() => {
  getConfigDataDetail()
})
</script>

<style scoped>
.el-card {
  border-radius: 12px;
  padding: 24px;
}

/* 表单项间距 */
.dynamic-form-item {
  margin-bottom: 16px;
}

/* 按钮样式 */
.el-button {
  min-width: 100px;
}
</style>
